import {PageContainer} from "@ant-design/pro-layout";
import ProCard from "@ant-design/pro-card";


import Form from "@/pages/system/tool/gen/detail/components/Form";

import React, {useEffect, useRef, useState} from "react";
import {history} from "umi";
import {GenDataDetail, GenField} from "@/pages/system/tool/gen/type";
import {genDetail, genUpdate} from "@/services/gen/api";
import {ProFormInstance, ProFormProps} from "@ant-design/pro-form";
import {EditableFormInstance} from "@ant-design/pro-table/lib/components/EditableTable";
import {message} from "antd";
// import './styles.less'


export default () => {
  let id: any = history?.location?.query?.id;
  const [genDetailInfo, setGenDetailInfo] = useState<GenDataDetail>();
  const [genFieldList, setGenFieldList] = useState<GenField[]>([])
  const formRef: React.MutableRefObject<ProFormInstance<GenDataDetail> | undefined> = useRef();
  const tableRef: React.Ref<EditableFormInstance<any> | undefined> = useRef();
  useEffect(() => {
    genDetail(id).then(res => {
      setGenDetailInfo(res.data)
      setGenFieldList(res.data.genFieldList)
    })
  }, [])


  // @ts-ignore
  const formProps: ProFormProps<GenDataDetail> & {
    genDetailInfo: GenDataDetail | undefined,
    submit: () => void,
    tableRef: React.Ref<EditableFormInstance<any> | undefined>,
    genFieldList: GenField[],
    setGenFieldList: React.Dispatch<React.SetStateAction<GenField[]>>
  } = {
    formRef: formRef,
    tableRef,
    submit: () => {
      let genDetail: GenDataDetail = formRef.current?.getFieldsValue()!!
      genDetail.genFieldList = genFieldList
      genDetail.id = genDetailInfo!.id
      genUpdate(genDetail).then(res => {
        message.success("修改成功").then(res => {
        })
        history.push({
          pathname: "/system/tool/gen"
        })
      })
    },
    genDetailInfo: genDetailInfo,
    genFieldList,
    setGenFieldList,


  }

  return (
    <PageContainer>
      <ProCard>
        <Form {...formProps}/>
      </ProCard>
    </PageContainer>
  )
}
